<template>
  <view class="container">
    <!-- 主内容区 -->
    <view class="content">
      <!-- 头部装饰 -->
      <view class="header-decoration" :style="{ backgroundColor: primaryColor }"></view>

      <!-- 公众号信息卡片 -->
      <view class="account-card">
        <view class="card-header">
          <view class="avatar-container">
            <image class="avatar" src="/static/other/wechat_avatar.jpg" mode="aspectFill" alt="公众号头像"></image>
            <view class="verified-badge">
              <uni-icons type="checkmarkempty" size="14" color="#fff"></uni-icons>
            </view>
          </view>
          <view class="account-info">
            <view class="account-name">表情包太全</view>
            <view class="account-id">ID: biaoqingbao_tq</view>
          </view>
        </view>
        <view class="card-body">
          <view class="account-desc">海量精选表情包，让聊天更有趣！每天更新热门、搞笑、可爱表情包，应有尽有。</view>
        </view>
      </view>

      <!-- 二维码卡片 -->
      <view class="qrcode-card">
        <view class="qrcode-title">扫码关注公众号</view>
        <view class="qrcode-container">
          <image class="qrcode" src="/static/other/tq_qr_code.png" mode="aspectFill" alt="公众号二维码"></image>
        </view>
        <view class="qrcode-tips">
          <text class="highlight">保存图片</text>后，使用微信<span class="text-bold">扫一扫</span>功能
        </view>
      </view>

      <!-- 操作按钮 -->
      <view class="action-buttons">
        <button class="save-btn" @click="saveQrcode">
          <uni-icons type="download" size="16" color="#666"></uni-icons>
          <text>保存二维码图片</text>
        </button>
        <button class="subscribe-btn" :style="{ backgroundColor: primaryColor }" @click="scanQrcode">
          <uni-icons type="weixin" size="16" color="#fff"></uni-icons>
          <text>微信扫码关注</text>
        </button>
      </view>

      <!-- 功能介绍 -->
      <view class="features">
        <view class="feature-item">
          <uni-icons type="image" size="24" color="#ffd95e"></uni-icons>
          <view class="feature-text">每日更新海量精选表情包</view>
        </view>
        <view class="feature-item">
          <uni-icons type="search" size="24" color="#ffd95e"></uni-icons>
          <view class="feature-text">支持关键词搜索，快速找到所需表情</view>
        </view>
        <view class="feature-item">
          <uni-icons type="star" size="24" color="#ffd95e"></uni-icons>
          <view class="feature-text">收藏喜欢的表情包，随时使用</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { downImageByUrl } from '@/hooks/down'
export default {
  data() {
    return {
      primaryColor: '#ffd95e',
      qrcodeUrl: '/static/other/tq_qr_code.png', // 二维码图片路径
      tempFilePath: '', // 临时文件路径
      wechatQrcodeUrl: 'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=XXXXXXXXXX#wechat_redirect' // 替换为实际公众号链接
    }
  },
  methods: {
    // 保存二维码图片
    saveQrcode() {
     this.downloadAndSaveImage(this.qrcodeUrl)
    },
    async downloadAndSaveImage(url){
		uni.showLoading({title: '下载中...',mask: true})
		// 获取绝对路径
		const absolutePath = await this.getAbsolutePath(url);
		await downImageByUrl(absolutePath)?.catch(e => {
			uni.hideLoading();
		})
		uni.hideLoading();
	},
	 // 获取绝对路径
	async getAbsolutePath(relativePath) {
	  return new Promise((resolve, reject) => {
		// 获取base路径
		const basePath = this.getBasePath();
		
		// #ifdef H5
		// 浏览器环境，结合base路径生成绝对路径
		resolve(new URL(basePath + relativePath, window.location.origin).toString());
		// #endif
		
		// #ifdef APP-PLUS
		// App环境，使用文件系统API获取绝对路径
		const fs = uni.getFileSystemManager();
		fs.readFile({
		  filePath: '_www/' + relativePath,
		  encoding: 'binary',
		  success: () => {
			resolve('_www/' + relativePath);
		  },
		  fail: () => {
			// 尝试使用plus API获取
			plus.io.resolveLocalFileSystemURL('_www/' + relativePath, (fileEntry) => {
			  fileEntry.toLocalURL((localUrl) => {
				resolve(localUrl);
			  }, reject);
			}, reject);
		  }
		});
		// #endif
		
		// #ifdef MP
		// 小程序环境，直接使用相对路径
		resolve(relativePath);
		// #endif
	  });
	},
	
	// 获取base路径
	getBasePath() {
	  // 默认返回配置中的base路径
	  return '/phone/';
	},
    // 扫码关注公众号
    scanQrcode() {
      // 检查是否支持小程序 API
      if (!uni.scanCode) {
        uni.showToast({
          title: '请在小程序中使用扫码功能',
          icon: 'none'
        });
        return;
      }
      
      uni.showModal({
        title: '提示',
        content: '即将打开微信扫码功能',
        success: (res) => {
          if (res.confirm) {
            uni.scanCode({
              onlyFromCamera: false,
              success: (scanRes) => {
                // 扫码成功，处理结果
                console.log('扫码结果:', scanRes);
                uni.showToast({
                  title: '扫码成功',
                  icon: 'success',
                  duration: 2000
                });
                
                // 这里可以根据扫码结果做进一步处理
                // 例如判断是否是公众号二维码，然后跳转到对应页面
                if (this.isWechatQrcode(scanRes.result)) {
                  this.navigateToWechat();
                } else {
                  uni.showToast({
                    title: '请扫描正确的公众号二维码',
                    icon: 'none',
                    duration: 2000
                  });
                }
              },
              fail: (err) => {
                console.error('扫码失败:', err);
                uni.showToast({
                  title: '扫码失败，请重试',
                  icon: 'none',
                  duration: 2000
                });
              }
            });
          }
        }
      });
    },
    
    // 判断是否是微信公众号二维码
    isWechatQrcode(result) {
      // 这里简单判断是否包含微信公众号相关关键字
      // 实际应用中应根据具体二维码内容进行判断
      return result.includes('weixin.qq.com') || result.includes('mp.weixin.qq.com');
    },
    
    // 跳转到微信公众号页面
    navigateToWechat() {
      // 检查是否支持小程序跳转
      if (!uni.navigateToMiniProgram) {
        uni.showToast({
          title: '无法直接打开微信，请手动扫码',
          icon: 'none'
        });
        return;
      }
      
      // 使用uni.navigateToMiniProgram打开微信小程序或公众号
      uni.navigateToMiniProgram({
        appId: 'wxd930ea5d5a258f4', // 微信官方AppID，用于打开微信
        path: `pages/index/index?url=${encodeURIComponent(this.wechatQrcodeUrl)}`,
        success: () => {
          console.log('成功跳转到微信');
        },
        fail: (err) => {
          console.error('跳转微信失败:', err);
          // 跳转失败，提示用户手动操作
          uni.showModal({
            title: '提示',
            content: '无法直接打开微信，请手动打开微信，使用扫一扫功能扫描二维码',
            showCancel: false
          });
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background-color: #f8f8f8;
}

/* 内容区样式 */
.content {
  padding: 15px;
  
  .header-decoration {
    height: 60px;
    border-radius: 10px 10px 0 0;
  }
}

/* 公众号卡片样式 */
.account-card {
  background-color: #fff;
  border-radius: 0 0 10px 10px;
  padding: 15px;
  margin-bottom: 15px;
  
  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    
    .avatar-container {
      position: relative;
      margin-right: 15px;
      
      .avatar {
        width: 64px;
        height: 64px;
        border-radius: 8px;
      }
      
      .verified-badge {
        position: absolute;
        bottom: -2px;
        right: -2px;
        width: 18px;
        height: 18px;
        background-color: #ffd95e;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    
    .account-info {
      .account-name {
        font-size: 18px;
        font-weight: 500;
        color: #333;
        margin-bottom: 3px;
      }
      
      .account-id {
        font-size: 14px;
        color: #999;
      }
    }
  }
  
  .card-body {
    .account-desc {
      font-size: 15px;
      color: #666;
      line-height: 1.5;
    }
  }
}

/* 二维码卡片样式 */
.qrcode-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  text-align: center;
  
  .qrcode-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 15px;
  }
  
  .qrcode-container {
    width: 200px;
    height: 200px;
    margin: 0 auto 10px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 8px;
    
    .qrcode {
      width: 100%;
      height: 100%;
    }
  }
  
  .qrcode-tips {
    font-size: 14px;
    color: #666;
    
    .highlight {
      color: #ffd95e;
      font-weight: 500;
    }
    
    .text-bold {
      font-weight: 500;
    }
  }
}

/* 按钮样式 */
.action-buttons {
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
  
  button {
    height: 44px;
    border-radius: 22px;
    font-size: 16px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    text {
      margin-left: 5px;
    }
  }
  
  .save-btn {
    background-color: #fff;
    color: #666;
    border: 1px solid #eee;
  }
  
  .subscribe-btn {
    color: #fff;
    font-weight: 500;
  }
}

/* 功能介绍样式 */
.features {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px 0;
  
  .feature-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    
    uni-icons {
      margin-right: 10px;
    }
    
    .feature-text {
      font-size: 15px;
      color: #666;
    }
  }
}
</style>